<template>
	<div id="tempname">
			<el-row :gutter="20" class="bg-grey">
				<el-col :span="11">
					<div class="tableTitle">
					  <el-form
					      :inline="true"
					      :model="examItemSearchForm"
					      class="demo-form-inline"
					  >
					    <el-form-item>
					      <el-input
					          v-model="examItemSearchForm.itemName"
					          placeholder="项目名称"
					      ></el-input>
					    </el-form-item>
					    <el-form-item>
					      <el-input
					          v-model="examItemSearchForm.deptName"
					          placeholder="科室名称"
					      ></el-input>
					    </el-form-item>
					    <el-form-item>
					      <el-button @click="getexamItemList">查找</el-button>
					    </el-form-item>
					  </el-form>
					</div>
					<!-- :key="tableKey" -->
					<div class="bg-blue">
					<!-- :key="tableKey" -->
					<el-table
						ref="staffTable"
						:data="staffList"
						max-height="500"
						:row-key="getRowKey"
						border
						fit
						highlight-current-row
						@selection-change="handleStaffChange"
					>
						<el-table-column type="selection" :reserve-selection="true" width="55" align="center"></el-table-column>
						<el-table-column label="科室名称" align="center">
							<template slot-scope="{ row }">
								<span>{{ row.deptName }}</span>
							</template>
						</el-table-column>
		
						<el-table-column label="项目名称" align="center">
							<template slot-scope="{ row }">
								<span>{{ row.itemName }}</span>
							</template>
						</el-table-column>
		
						<el-table-column label="价格" align="center">
							<template slot-scope="{ row }">
								<span>{{ row.price }}</span>
							</template>
						</el-table-column>
		
						<el-table-column label="适用范围" align="center">
							<template slot-scope="{ row }">
								<span>{{ row.range }}</span>
							</template>
						</el-table-column>
					</el-table>
					</div>
					<!-- <div style="margin-top: 20px">
						<el-checkbox v-model="nsmAll" @change="toggleSelection(newmeidcal)">全选/不选</el-checkbox>
					</div> -->
				</el-col>
				<el-col :span="2" align="center" class="buttonAll" style="padding-top: 140px;">
						<el-button @click="addStaff('single')" type="primary" :disabled="!staffData.length" class="staffButton">
							<i class="el-icon-arrow-right"></i>
							<i class="el-icon-arrow-right"></i>
						</el-button><br>
						<el-button
							@click="removeStaff('single')"
							type="primary"
							:disabled="!selectedStaffData.length"
							class="staffButton"
						>
							<i class="el-icon-arrow-left"></i>
							<i class="el-icon-arrow-left"></i>
						</el-button>
				</el-col>
				<el-col :span="11">
					<div class="tableTitle pb-20">
						当前体检项目列表（{{selectedStaffList.length}}项）
						<!-- <el-checkbox v-model="nsmAll" @change="toggleSelection(newmeidcal)" class="mar-10">全选/不选</el-checkbox> -->
						<div class="nsm-right-top">
							<el-button type="primary" @click="setmeal">选择体检套餐</el-button>
						</div>
					</div>
					<div class="bg-blue" style="height: 315px;">
					<el-table
						ref="selectedStaffTable"
						:data="selectedStaffList"
						max-height="500"
						:row-key="getRowKey"
						border
						fit
						highlight-current-row
						@selection-change="handleSelectedStaffChange"
					>
						<el-table-column type="selection" :reserve-selection="true" width="55" align="center"></el-table-column>
						<el-table-column label="项目名称" align="center">
							<template slot-scope="{ row }">
								<span>{{ row.itemName }}</span>
							</template>
						</el-table-column>
		
						<el-table-column label="价格" align="center">
							<template slot-scope="{ row }">
								<span>{{ row.price }}</span>
							</template>
						</el-table-column>
		
						<el-table-column label="适用范围" align="center">
							<template slot-scope="{ row }">
								<span>{{ row.range }}</span>
							</template>
						</el-table-column>
		
						<el-table-column label="缴费方式" align="center">
							<template slot-scope="{ row }">
								<span>{{ row.payaway }}</span>
							</template>
						</el-table-column>
		
						<el-table-column label="是否缴费" align="center">
							<template slot-scope="{ row }">
								<span>{{ row.ispay }}</span>
							</template>
						</el-table-column>
					</el-table>
					</div>
					<el-row>
						<el-col :span="12">分组名称: {{groupn.gname}}</el-col>
						<el-col :span="12" style="text-align: right;">
							金额合计: 
							<span style="font-size: 200%;color: #f00;border: 1px solid #000;padding: 4px 10px;">
								{{originalprice}}
							</span>
							</el-col>
					</el-row>
				</el-col>
			</el-row>
			<el-row style="margin-top: 30px;" type="flex" align="middle">
				<el-col :span="24" style="text-align: right;padding-bottom: 20px;">
						<el-button type="primary" @click="sendtotal">保存并返回</el-button>
						<!-- <el-button @click="outerVisible1 = false">取 消</el-button> -->
				</el-col>
			</el-row>
		<el-dialog
		  title="选择套餐"
		  :visible.sync="setmealis"
		  width="70%"
		  class="top_dialog"
			append-to-body
		>
				<el-form :inline="true" :model="packageSearchForm" class="demo-form-inline">
				  <el-form-item label="">
				    <el-input
				        v-model="packageSearchForm.packageName"
				        placeholder="输入查询关键词"
				    ></el-input>
				  </el-form-item>
				  <el-form-item>
				    <el-button type="primary" @click="readPackageList">查询</el-button>
				  </el-form-item>
				  <el-checkbox v-model="isLinkDept" class="check-style">关联所在单位</el-checkbox>
				</el-form>
				<el-table
				    ref="multipleTable1"
				    :data="setmeallist"
				    tooltip-effect="dark"
				    border
				    style="width: 100%"
						@select="selectrow"
				>
					<el-table-column type="selection" width="40"></el-table-column>
					<el-table-column prop="packageCode" label="套餐编号"></el-table-column>
					<el-table-column prop="packageName" label="套餐名称"></el-table-column>
					<el-table-column prop="code" label="代码" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="packageType" label="体检类型" show-overflow-tooltip>
					</el-table-column>
					<el-table-column
							prop="applyTo"
							label="适用范围"
							width="80"
							show-overflow-tooltip
					>
					</el-table-column>
					<el-table-column
							prop="price"
							label="价格"
							width="80"
							show-overflow-tooltip
					>
					</el-table-column>
					<el-table-column
							prop="unitName"
							label="单位名称"
							show-overflow-tooltip
					>
					</el-table-column>
					<el-table-column label="编辑时间" width="120">
						<template slot-scope="scope">{{ formatTimes(scope.row.editTime) }}</template>
					</el-table-column>
				</el-table>
		  <div slot="footer" class="dialog-footer">
		    <el-button type="primary" @click="savemealis"
		      >确定</el-button
		    >
		    <el-button @click="setmealis = false">取 消</el-button>
		  </div>
		</el-dialog>
	</div>
</template>
<script>
export default {
	name: 'tempname',
	props:{
		groupn: {
			type: Object,
			default: ()=>{
        return {
          "gname":'',
          "mid":'',
          "cid":'',
        }
			}
		},
		originalprice: Number,
		// refresh: false,
		// cid: String,
	},
	data() {
		return {
			isLinkDept: false,
			form: {},
			nsmAll: false,
			formInline: {},
			listgeren:[],
			// select全选
			multipleSelection: [],
			// 原价合计
			// originalprice: 0,
			costprice:0,
			// 待选
			staffList: [],
			// listLoading: true,
			// 待选选中
			staffData: [],
			// 总数
			staffNum: 0,
			// 选中数量
			staffCheckNum: 0,
			// 已选选中
			selectedStaffData: [],
			// 已选总数
			selectedStaffNum: 0,
			// 已选选中数量
			selectedStaffCheckNum: 0,
			// 已选列表
			selectedStaffList: [],
			// 添加单项
			inspectionitemis: false,
			inspectionitemlistis:[],
			inspectionitemlist:[],
			// 选择套餐
			setmealis: false,
			setmeallist:[],
			packageSearchForm:{},
			packagearr:{},
			examItemSearchForm: {},
			// readPackageList: {},
		}
	},
	watch:{
		selectedStaffList(newValue) {
			this.originalprice=0;
			console.log(newValue)
			this.getSummaries();
		},
		// groupid(val) {
		// 	this.groupid = val
		// }
		groupn(val) {
			var _this = this;
			_this.$nextTick(function () {
				console.log("当前obj：",_this.groupn);
				this.groupn = val
				_this.medicalDetail()
			});
		},
		// "groupn":{
		// 	deep:true,
		// 	handler:function(newVal,oldVal) {
		// 		this.$nextTick(() => {
		// 			this.groupn = newVal
		// 			console.log("当前obj：",_this.groupn);
		// 			this.medicalDetail
		// 		})
		// 	}
		// },
	},
	mounted() {
		this.examItemList()
		// this.refreshweb(this.refresh)
		// this.medicalDetail()
	},
	methods:{
		// 查询
		readPackageList() {
		  this.$axios.readPackageList(this.packageSearchForm).then(res => {
		    if (res.code == '00000') {
		      this.packageList = res.data.records
		    }
		    // console.log(res.data,this.queryform)
		  })
		},
		getexamItemList() {
		  this.examItemList = []
		  this.$axios.examItemList(this.examItemSearchForm).then(res => {
		    if (res.code === '00000') {
		      var records = res.data.records
		      records.map(item => {
		        this.examItemList.push({
		          itemId: item.id,
		          itemName: item.itemName,
		          deptName: item.deptName,
		          price: item.price,
		          applyTo: item.applyTo
		        })
		      })
		    }
		  })
		},
		// refreshweb() {
		// 	if (this.selectedStaffList != 0) {
		// 		this.medicalDetail()
		// 	}
		// },
		getRowKey(row) {
			return row.itemId
		},
		// 已保存项目明细
		medicalDetail() {
			console.log("当前mid",this.groupn.mid)
			this.$axios.getPeContractsGroupItemById({
				id: this.groupn.mid
			}).then(res=>{
			  if(res.code =='00000'){
			    this.selectedStaffList = res.data.peContractsGroupItemsList
					// selectedStaffList
					// let arr = res.data.examItemsDTOList;
					// this.selectedStaffList = this.selectedStaffList.concat(arr);
			  }
			  console.log("获取项目明细",res)
			})
		},
		// 合计方法
		getSummaries() {
			this.selectedStaffList.forEach((item)=>{
				if (item.price==null) {
					item.price = 0;
					this.originalprice += parseInt(item.price);
				} else{
					this.originalprice += parseInt(item.price);
				}
			});
		},
		// 单选
		selectrow(selection, row) {
		  this.packagearr = row;
			// console.log("选中的信息: ",this.selectinfo);
		  if (selection.length > 1) {
		    let del_row = selection.shift()
		    this.$refs.multipleTable1.toggleRowSelection(del_row, false) // 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
		  }
		},
		handleSelectionChange(val) {
			this.multipleSelection = val;
		},
		// 穿梭框
		//
		// 左边表格选中存入staffData
		handleStaffChange(rows) {
			this.staffCheckNum = rows.length
			this.staffData = []
			if (rows) {
				rows.forEach((row) => {
					if (row) {
						this.staffData.push(row)
					}
				})
			}
		},
		// 左->右(单选-全选)
		addStaff(type) {
			setTimeout(() => {
				// 清空选择
				this.$refs['staffTable'].clearSelection()
				this.$refs['selectedStaffTable'].clearSelection()
			}, 0)
			if (type === 'single') {
				this.staffData.forEach((item) => {
					this.selectedStaffList.push(item)
				})
				this.selectedStaffNum = this.selectedStaffList.length
				for (let i = 0; i < this.staffList.length; i++) {
					for (let j = 0; j < this.staffData.length; j++) {
						if (this.staffList[i].id === this.staffData[j].id) {
							this.staffList.splice(i, 1)
							this.staffNum = this.staffList.length
						}
					}
				}
			}
			
			// if (type === 'all') {
			// 	this.staffList.forEach((item) => {
			// 		this.selectedStaffList.push(item)
			// 	})
			// 	this.staffList = []
			// 	this.staffNum = this.staffList.length
			// 	this.selectedStaffNum = this.selectedStaffList.length
			// }
		},
		// 右边表格选中存入selectedStaffData
		handleSelectedStaffChange(rows) {
			this.selectedStaffCheckNum = rows.length
			this.selectedStaffData = []
			if (rows) {
				rows.forEach((row) => {
					if (row) {
						this.selectedStaffData.push(row)
					}
				})
			}
		},
		// 右->左(单选-全选)
		removeStaff(type) {
			setTimeout(() => {
				this.$refs['staffTable'].clearSelection()
				this.$refs['selectedStaffTable'].clearSelection()
			}, 0)
			if (type === 'single') {
				this.selectedStaffData.forEach((item) => {
					this.staffList.push(item)
					this.staffNum = this.staffList.length
				})
				// console.log('this.staffList', this.staffList)
				for (let i = 0; i < this.selectedStaffList.length; i++) {
					for (let j = 0; j < this.selectedStaffData.length; j++) {
						if (
							this.selectedStaffList[i] &&
							this.selectedStaffData[j] &&
							this.selectedStaffList[i].id === this.selectedStaffData[j].id
						) {
							this.selectedStaffList.splice(i, 1)
							this.selectedStaffNum = this.selectedStaffList.length
						}
					}
				}
			}
			if (type === 'all') {
				this.selectedStaffList.forEach((item) => {
					this.staffList.push(item)
					this.staffNum = this.staffList.length
				})
				this.selectedStaffList = []
				this.selectedStaffNum = 0
			}
		},
		// 选择套餐
		setmeal() {
		  this.setmealis = true;
			this.queryPbPackagesList();  //这里改成根据分组id获取套餐
		},
		// 储存选择的套餐
		savemealis() {
			// let arr[{"itemName":"packageName"}]=this.multipleSelection;
			// arr.forEach(iterator=> {
			// 	iterator['itemName'] = iterator.packageName; 
			// 	delete iterator.packageName; //将修改的旧属性名删除
			// })
			// console.log(arr);
			
			// let arr = this.multipleSelection;
			// this.selectedStaffList=this.selectedStaffList.concat(arr);
			// this.$refs.multipleTable.clearSelection();
			// this.setmealis = false;
			// // 数组去重
			// var m = new Map();
			// this.selectedStaffList = this.selectedStaffList.filter((ele) => !m.has(ele.id) && m.set(ele.id, ""));
			
			// console.log(this.packagearr)
			// queryPackagItems
			this.$axios.queryPackagItems({
					"packageId": this.packagearr.id
				}).then(res=>{
			  if(res.code =='00000'){
			    // this.staffList = res.data.records
					let arr = res.data.examItemsDTOList;
					this.selectedStaffList = this.selectedStaffList.concat(arr);
			  }
			})
			
			this.setmealis = false;
		},
		sendtotal() {
			// console.log(this.selectedStaffList)
			// this.selectedStaffList.forEach(item=>{
			// 	if (item.packageName != null) {
			// 		pname = item.packageName
			// 		pprice = item.price
			// 	}
			// })
			// names = names.join(',');
			
			let peContractsGroupItemsList = []
			this.selectedStaffList.forEach(item=>{
				if (item.id != null) {
					peContractsGroupItemsList.push(
						{
						  "applyTo": item.applyTo,
						  "groupId": item.groupId,
						  "itemId": item.id,
						  "price": item.price,
						  // "sequence": "显示序号"
						}
					)
				}
			})
			let obj = {
				"id":this.groupid,
				"packageName":this.packagearr.packageName,
				"packagePrice": this.packagearr.packagePrice,
				"discountPrice": this.originalprice,
				"peContractsGroupItemsList": peContractsGroupItemsList
			}
			// obj = JSON.parse(obj);
			// console.log("传的参数：",obj)
			this.$axios
				.updatePeContractsGroup(
					obj
				).then(res=>{
			  if(res.code =='00000'){
			    // this.staffList = res.data.records
					// console.log(this.groupn.cid);
					let flag = false;
					this.$emit("sendtotal",false) // 向父级传递
			  }
			  // console.log(res)
			})
		},
		// 查询合同分组
		queryGroupList(queryid) {
			this.$axios.queryGroupList({
				contractId: queryid
			}).then(res=>{
				if(res.code =='00000'){
					// 暂时隐藏
					this.tableData = res.data
					// this.total = res.data.total
				}
				// console.log("合同分组列表: ",res);
				// this.initGroupinfo();
			})
		},
		// // 储存选择的单项
		// saveChoiceditem() {
		// 	this.listgeren=this.listgeren.concat(this.inspectionitemlistis);
		// 	this.inspectionitemlistis = [];
		// 	this.inspectionitemis = false;
		// 	// 数组去重
		// 	var m = new Map();
		// 	this.listgeren = this.listgeren.filter((ele) => !m.has(ele.id) && m.set(ele.id, ""));
		// 	console.log(this.listgeren);
		// },
		// 添加单项
		// inspectionitem() {
		//   this.inspectionitemis = true;
		// 	this.examItemList();
		// 	// console.log(this.listgeren);
		// },
		// 消息提示
		open(msg) {
			this.$message(msg);
		},
		// 添加单项，删除单项
		addItem(row) {
			var flag = false;
			if (this.inspectionitemlistis.length == 0) {
				this.inspectionitemlistis.push(row);
			} else{
				this.inspectionitemlistis.some((item)=>{
					if (item.id == row.id) {
						this.open("此项已存在，请勿重复添加！");
						flag = true;
						return true
					}
				})
				if (!flag) {
					this.inspectionitemlistis.push(row);
				}
			}
		},
		deleteItem(row) {
			this.inspectionitemlistis.some((item,i) => {
				if (item.itemCode == row.itemCode) {
					this.inspectionitemlistis.splice(i, 1);
					return true;
				}
			})
		},
		// barcodegroupId    getExamItemById
		getExamItemById() {
			this.$axios.getExamItemById({
					barcodegroupId: this.groupid
			}).then(res=>{
			  if(res.code =='00000'){
			    this.staffList = res.data.records
			  }
			  // console.log(res)
			})
		},
		
		// 选择单项
		examItemList(){
		  this.$axios.examItemList({
			}).then(res=>{
		    if(res.code =='00000'){
		      this.staffList = res.data.records
		    }
		    // console.log(res)
		  })
		},
		// 删除体检套餐
		deletetaocan() {
			// console.log('第1个数组',this.multipleSelection)
			// console.log('第2个数组',this.listgeren)
			this.multipleSelection.forEach(data =>{
				this.listgeren.push(data);
				//通过两个数组的id进行对比过滤
				this.listgeren = this.listgeren.filter(item => item.id != data.id)
			})
			// console.log('过滤后的数组',this.listgeren)
		},
		// queryPackagItemsByPackIds
		// 选择套餐
		queryPbPackagesList(){
		  this.$axios.queryPbPackagesList({
			}).then(res=>{
		    if(res.code =='00000'){
		      this.setmeallist = res.data.records
		    }
		    // console.log(res)
		  })
		},
	}
}
</script>
<style scoped>
.tableTitle {
	padding-top: 10px;
}
.text-center {
	text-align: center !important;
}
.text-left {
	text-align: left !important;
}
.bg-blue {
	height: 500px;
	background-color: #CFE8F4;
	border: 1px solid #CFE8F4;
	overflow-y: auto;
	}
.bg-grey {
	background-color: #F2F2F2;
}
.buttonAll {
	padding-bottom: 50px;
}
.text-red {
	color: #D9001B;
}
.mt-20 { margin-top: 20px;}
.pt-20 { padding-top:20px;}
.pb-20 { padding-bottom: 20px;}
.mar-10 { padding: 0 10px;}
.check-style {
	margin: 10px 0 0 40px !important;
}
.staffButton {
	margin-top: 20px;
}
.nsm-right-top {
	display: inline;
	margin-left: 10px;
}
.pagination {
  text-align: center;
}
.nsm-bottom-line {
	margin-top: 5px;
	margin-bottom: 20px;
	padding: 10px;
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	background-color: #fff;
}
.vmm {
	margin-top: 10px;
}
.disflex {
  display: flex;
  justify-content: space-between;
}

.main_box_title {
  background: #fff;
  padding: 10px;
}
.aside_box_title {
  margin: 0px 8px 10px;
  /* text-align: center; */
}
.header_top .el-divider--horizontal {
  margin-top: 0px;
}
.add_info .el-divider--horizontal {
  margin-top: 10px;
}
.add_info {
  display: flex;
  padding: 0px 20px;
}
.el-main {
  padding: 0px;
  padding-left: 20px;
}
.staff_form_btn {
}
.info_l {
  text-align: left;
  flex: 1;
}
.info_r {
  text-align: left;
  flex: 1;
  margin-left: 30px;
}
.info_l_input {
  width: 82%;
}
.info_l_button {
  margin-left: 10px;
}
.info_sel_r_groupn {
  margin-left: 40px;
}
.info_sel_r_group {
  margin-left: 10px;
}
.info_sel {
  display: flex;
}
.info_sel_l {
  width: 50%;
}
.info_sel_r {
  width: 50%;
  margin-left: 50px;
}
.info_sel_r_img {
  width: 180px;
  height: 220px;
  margin: 0px auto;
}
.avatar-uploader {
  margin: 0px auto;
  text-align: center;
}
.info_l /deep/ .el-select {
  width: 100%;
}
.info_l_head {
}
.pagination {
  text-align: center;
}
.top_dialog /deep/ .el-dialog {
  margin-top: 3vh !important;
}
.photog {
  width: 600px;
  height: 400px;
  margin: 10px auto;
}
.photog video {
  width: 600px;
  height: 400px;
}
.photog canvas {
  width: 600px;
  height: 400px;
}
.info_sel_s_butn {
  margin: 0px auto;
}
.info_sel_butn {
  margin-left: 20px;
}
.info_sel_s {
  margin-left: 20px;
}
.ldog_butn {
  width: 120px;
  height: 50px;
  margin: 0px auto;
}
.form_div {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  padding: 0px 30px;
}
.block {
  text-align: center;
}
.lai_div {
  margin-top: 20px;
  display: flex;
}
.lai_div_l {
  width: 480px;
}
.lai_div_l /deep/ .el-input--suffix {
  width: 400px;
}
.lai_div_r {
  margin-left: 20px;
}
.yvyue_div {
  display: flex;
  justify-content: space-between;
}
.yvyue_div button {
  width: 150px;
}
.options {
  position: relative;
}
.options_div {
  position: absolute;
  top: 5px;
  right: 10px;
  z-index: 99 !important;
}
/* 扫码交表 */
.smjb-top {
	padding: 20px 0;
	border-bottom: 1px solid #eee;
}
.smjbtablestyle {
	margin: auto;
}
.title1 {
	margin: 20px auto;
	width: 80%;
	font-size: 20px;
}
.smfooter {
	display: flex;
	justify-content: space-around;
	padding-top: 20px;
	font-size: 12px;
	color: #D9001B;
	border-top: 1px solid #eee;
}
.dfooter {
	padding-top: 30px;
	display: flex;
	justify-content: space-between;
}
.zyd-code {font-size: 28px;}
.zyd-title { font-size: 32px; text-align: center;}
.zyd-item {
	margin-top: 20px;
	font-size:18px;
	}
.fontstylekai, .adjusttable {
	font-family: "楷体";
}
.title4 {
	margin-top: 20px;
	padding: 15px 0;
	text-align: center;
	background-color: #f0f0f0;
}
.adjusttable {
	width: 100%;
	font-size: 18px;
}
.adjusttable td {
	padding: 20px 0;
	border-bottom: 1px solid #999;
}
.adjusttable td:nth-child(2) {
	width:60%;
}
.adjusttable .el-checkbox__label {
	font-size: 18px !important;
}
.title-common {
	position: relative;
	padding:30px 0;
	text-align:center;
	font-size: 26px;
	font-weight: normal;
}
.title-common span {
	position: absolute;
	right: 0;
}
/* 打印表单样式 */
.printinput /deep/.el-input__inner {
	border: 0;
	border-bottom: 1px solid #333;
	border-radius: 0;
}
.jfnoticebottom {
	display: flex;
	margin: 20px 0 40px;
}
.jfnoticebottom span {
	flex: 1;
}
</style>